<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <input id="files" type="file" multiple />
    <h4 id="t1"></h4>
    <img id="img01" src="" alt="">
    <canvas id="can"></canvas>
    <h4 id="t2"></h4>
    <img id="img02" src="" alt="">
    <script>
        /*
            直接设置输出质量+-0.1来预测输出合适的size太死板了
            尝试这样的算法
            01.判断现有图片已经被压缩的比例
                size /（widhth * height）
                172112 / (500 * 500) = 0.688448
            02.需要压缩的比例
                size /（widhth * height）
                60000 / (500 * 500) = 0.24
            图片尺寸
        */
        let input = document.getElementById("files")

        let img01 = document.getElementById("img01")
        let img02 = document.getElementById("img02")
        input.addEventListener('change', function() {
            console.log(this.files[0]);
            let files = this.files
            let img = new Image()

            img.src = URL.createObjectURL(this.files[0])
            img.onload = function() {
                console.log(this);

                // document.body.appendChild(this);
                let _canvas = document.getElementById("can")
                //处理缩放
                let w = this.width
                let h = this.height
                // console.log(new Blob(img,'image/jpg'));


                _canvas.setAttribute("width", w)
                _canvas.setAttribute("height", h)
                _canvas.getContext("2d").drawImage(this, 0, 0, w, h)
                //转格式
                console.log(_canvas);

                // let base64_ok = _canvas.toDataURL(`image/${type}`, quality)
                let s = 70000
                let z1 = files[0].size / (this.width * this.height)
                let z2 = s / (this.width * this.height)
                let i = s / files[0].size
                if (i > 1) i = 1
                if (i < 0) i = 0.01

                // let i = this.files[0].size / (this.width*this.height)
                // setSizeFun(s, i)
                setSizeFun(s, 1)

                function setSizeFun(setSize, q) {
                    //本来的图片就很小了
                    if (files[0].size < setSize) {
                        // let b = new Blob([files[0]], {
                        //     type: files[0].type
                        // })
                        // _canvas.toBlob(function(blob) {
                        //     console.log( blob,'原样输出');
                        // }, `image/jpeg`, 1)

                        // return
                    }
                    let qu = q
                    let sizeAfter
                    _canvas.toBlob(function(blob) {
                        img02.src = URL.createObjectURL(blob)
                        sizeAfter = blob.size
                        console.log(blob, `setSize:`, setSize, `q:`, q);
                        //合格
                        if (setSize > sizeAfter && setSize * 0.9 < sizeAfter) {
                            console.log(blob, '✅✅✅✅');

                        } else {
                            // if (setSize < sizeAfter) qu = qu -0.005
                            // else qu = qu +0.005
                            // let yuan = Math.abs((qu * setSize / sizeAfter)-qu)
                            // let di = 0
                            // if (yuan<0.002)  {
                            //     di = 0.002
                            // }
                            qu =  qu * setSize / sizeAfter
                            // if (qu < 0) {
                            //     console.warn('没有合适的');
                            //     return
                            // }
                            // if (qu > 1 && setSize > sizeAfter && setSize * 0.9 < sizeAfter) {
                            //     console.log(blob, '最大输出质量✅✅✅✅');
                            //     return
                            // }
                            if (qu > 1 || qu < 0) {
                                if (setSize > sizeAfter) {
                                    console.log(blob, '最大输出质量✅✅✅✅');
                                } else {
                                    console.warn('没有合适的');
                                }
                                return
                            }
                            console.log('继续');

                            setSizeFun(setSize, qu)
                        }
                    }, `image/jpeg`, q)


                }
            }
        }, false)
    </script>
</body>

</html>